<template>
   <div class="index_map_con" ref="indexMap"></div>
</template>

<script>
import JiangSu from '../../assets/js/jiangsu.json'
export default {
   
    data(){
        return{
            mapJiangSu:[],
        }
    },
    created(){
        this.mapJiangSu=JiangSu
    },
    mounted(){
        this.initMap()
    },
    methods:{
      initMap(){
        let mapEChart=this.$echarts.init(this.$refs.indexMap);
        var data = [{
                name: '南京',
                value: 207
            }, {
                name: '无锡',
                value: 0
            },  {
                name: '徐州',
                value: 0
            }, {
                name: '常州',
                value: 0
            }, {
                name: '苏州',
                value: 0
            },  {
                name: '南通',
                value: 0
            }, {
                name: '连云港',
                value: 0
            },  {
                name: '淮安',
                value: 12
            },  {
                name: '扬州',
                value: 346
            }, {
                name: '镇江',
                value: 0
            }, {
                name: '泰州',
                value: 0
            }, {
                name: '宿迁',
                value: 3
            },{
                name: '盐城',
                value: 3
            }]
        this.$echarts.registerMap('JiangSu', this.mapJiangSu);
        let option = {
            tooltip: {
                triggerOn: "click",

            },
            visualMap: {
                left: 16,
                bottom: 40,
                showLabel: true,
                pieces: [{
                    gt: 100,
                    label: "> 100 人",
                    color: "#7f1100"
                }, {
                    gte: 80,
                    lte: 100,
                    label: "80-100 人",
                    color: "#ff5428"
                }, {
                    gte: 60,
                    lt: 80,
                    label: "60-80 人",
                    color: "#ed6d3d"
                }, {
                    gt:40,
                    lt: 60,
                    label: "40-60 人",
                    color: "#ff8c71"
                }, {
                    gt: 20,
                    lt: 40,
                    label: "20-40 人",
                    color: "#ffd768"
                }, {
                    gt: 10,
                    lt: 20,
                    label: "10-20 人",
                    color: "#fddea5"
                }, {
                    gt: 0,
                    lt: 10,
                    label: "< 10 人",
                    color: "#fff1cf"
                },{
                    value:0,
                    color:'#fbfbfb'
                }],
                textStyle:{
                    color:'#24C2FF'
                },
            },
            geo: {
                map: 'JiangSu',
                zoom: 1.2,
                label: {
                    show: true,
                    color: '#000000'
                    
                },
                roam: false,
                itemStyle: {
                    areaColor: '#fbfbfb',
                    borderColor: '#3399FF',
                },
                emphasis: {
                    itemStyle:{
                        areaColor: '#CC9933'
                    }
                        
                }
            },
            series: [{
                name:'现有确诊病例',
                type: 'map',
                geoIndex: 0,
                data: data
            }]
        };
        mapEChart.setOption(option);
      }
    }
    
}
</script>


<style lang="less" scoped>
.index_map_con{
    width: 890px;
    height: 440px;
}

</style>